<template>
	<!-- 因素描述 -->
	<view class="type_6">
		<!-- 单排模式 -->
		<template v-if="activeQuestion.extension.LayerResourceDisplayType==1">
			<view class="displayType_1">
				<view class="questionText" v-html="activeQuestion.questionText"></view>
				<view class="questionResourceContainer" @click="previewImage(activeQuestion.questionResources[0].href)">
					<image :src="activeQuestion.questionResources[0].href" mode="aspectFit">
					</image>
				</view>
				<Swiper v-if="paperMode==1" class="swiper" :layerResources="activeQuestion.layerResources"
					:activeIndexList="[activeLayerIndex]" :greyIndexList="greyIndexList" @clickLayer="clickLayer">
				</Swiper>
				<view v-if="paperMode==1" class="textarea">
					<textarea :key="activeLayerIndex" v-model="activeAnswer[activeLayerIndex]" placeholder="请输入内容"
						:maxlength="-1" auto-height @change="updateAnswer"></textarea>
				</view>
			</view>
		</template>

		<!-- 两列模式 -->
		<template v-if="activeQuestion.extension.LayerResourceDisplayType==2">
			<view class="displayType_2">
				<Swiper v-if="paperMode==1" class="swiper" vertical
					:layerResources="activeQuestion.layerResources.filter((item,index)=>index%2==0)"
					:activeIndexList="[activeLayerIndex]" :greyIndexList="greyIndexList" @clickLayer="clickLayer">
				</Swiper>
				<view class="middle">
					<view class="questionText" v-html="activeQuestion.questionText"></view>
					<view class="questionResourceContainer"
						@click="previewImage(activeQuestion.questionResources[0].href)">
						<image :src="activeQuestion.questionResources[0].href" mode="aspectFit">
						</image>
					</view>
					<view v-if="paperMode==1" class="textarea">
						<textarea v-model="activeAnswer[activeLayerIndex]" placeholder="请输入内容" :maxlength="-1"
							auto-height></textarea>
					</view>
				</view>
				<Swiper v-if="paperMode==1" class="swiper" vertical
					:layerResources="activeQuestion.layerResources.filter((item,index)=>index%2==1)"
					:activeIndexList="[activeLayerIndex]" :greyIndexList="greyIndexList" @clickLayer="clickLayer">
				</Swiper>
			</view>
		</template>


		<template v-if="paperMode==2 && activeRecord">
			<view class="recordCard">

				<radio-group @change="recordIndex=$event.detail.value"
					style="display: flex;flex-wrap:wrap;align-items: center;">
					<label v-for="(layer,index) of activeQuestion.layerResources" style="display: flex;flex-direction: column;align-items: center;width:10vw;
						box-sizing: border-box;border:1px solid #ccc;margin: 0.5vw;">
						<image :src="layer.href" mode="aspectFit" style="width:100%;height:8vw;">
						</image>
						<radio color="#2380E9" :value="String(index)" :checked="recordIndex == index"
							style="margin:0.5vw;" />
					</label>
				</radio-group>

			</view>
			<view class="recordCard">
				<view class="title">参考答案</view>
				<view class="answer">
					<template v-if="activeRecord.answer===null">无</template>
					<template v-else>
						{{activeRecord.answer[recordIndex]}}
					</template>
				</view>
				<view v-if="activeRecord.answerDetail" class="answerDetail">
					{{activeRecord.answerDetail}}
				</view>
			</view>

			<view class="recordCard">
				<view class="title">我的答案</view>
				<view class="userAnswer">
					<template v-if="activeRecord.userAnswer===null||activeRecord.userAnswer[recordIndex]==''">无</template>
					<template v-else>
						{{activeRecord.userAnswer[recordIndex]}}
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import Swiper from "./Swiper.vue";
	export default {
		components: {
			Swiper
		},
		props: ["paperMode", "activeQuestion", "initAnswer", "activeRecord"],
		data() {
			return {
				activeAnswer: null,
				activeLayerIndex: 0,
				greyIndexList: [],


				//record
				recordIndex: 0,
			}
		},
		watch: {
			activeAnswer: {
				handler(newValue, oldValue) {
					let greyIndexList = [];
					newValue.forEach((item, index) => {
						if (item) {
							greyIndexList.push(index)
						}
					})
					this.greyIndexList = greyIndexList;
				},
				deep: true,
			}
		},
		created() {
			this.activeAnswer = this.initAnswer;
		},
		methods: {
			clickLayer(layerIndex) {
				this.activeLayerIndex = layerIndex;
			},
			updateAnswer() {
				this.$emit("updateAnswer", this.activeAnswer);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./record.scss";

	.type_6 {
		.displayType_1 {
			display: flex;
			flex-direction: column;
			align-items: center;

			.questionText {
				line-height: 2vw;
				white-space: pre-wrap;
			}

			.questionResourceContainer {
				width: 40vw;
				height: 15vw;
				margin-top: 1vw;
				margin-bottom: 1vw;
				position: relative;

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.swiper {
				margin-top: 1vw;
			}

			.textarea {
				width: 71vw;
				border: 1px solid #ccc;
				border-radius: 0.5vw;
				margin-top: 1.2vw;
				box-sizing: border-box;
				padding: 1vw;

				textarea {
					font-size: 1.4vw;
					width: 100%;
					min-height: 7vw;
				}
			}

		}



		.displayType_2 {
			display: flex;
			align-items: flex-start;

			.middle {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.questionText {
					line-height: 2vw;
					white-space: pre-wrap;
				}

				.questionResourceContainer {
					width: 40vw;
					height: 20vw;
					margin-top: 1vw;
					margin-bottom: 1vw;
					position: relative;

					image {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}

				.textarea {
					align-self: stretch;
					border: 0.1vw solid #ccc;
					border-radius: 0.5vw;
					margin-top: 1.2vw;
					box-sizing: border-box;
					padding: 1vw;

					textarea {
						font-size: 1.4vw;
						width: 100%;
						min-height: 9vw;
					}
				}
			}

			.swiper {
				margin: 2.5vw;
			}



		}
	}
</style>